<template>
    <div id="chart-container" style="width: 400px; height: 400px"></div>
</template>

<script>
import * as echarts from "echarts"
import "echarts-gl"

export default {
    mounted() {
        this.initChart()
    },
    methods: {
        initChart() {
            const chartDom = document.getElementById("chart-container")
            const myChart = echarts.init(chartDom, null, {renderer: "webgl"})
            const option = {
                // title: {
                // 	text: "能耗分布",
                // 	left: "center",
                // },
                tooltip: {
                    trigger: "item"
                },
                series: [
                    {
                        type: "pie",
                        radius: "50%",
                        data: [
                            {value: 33, name: "能耗1"},
                            {value: 30, name: "能耗4"},
                            {value: 25, name: "能耗2"},
                            {value: 12, name: "能耗3"}
                        ],
                        label: {
                            show: true,
                            formatter: "{b}: {c}%"
                        },
                        itemStyle: {
                            normal: {
                                depth: 30 // 控制饼图厚度，实现3D效果
                            }
                        }
                    }
                ]
            }
            myChart.setOption(option)
        }
    }
}
</script>

<style scoped>
/* 可按需添加样式 */
</style>
